<template>
  <el-form :model="loginForm" :rules="fieldRules" ref="loginForm" label-position="left" label-width="0px" class="login-container">
    <span class="tool-bar">
      <!-- 主题切换 -->
      <theme-picker style="float:right" class="theme-picker" :default="themeColor" @on-theme-change="onThemeChange" />
    </span>
    <h2>{{ fullName }}</h2>
    <el-form-item prop="account">
      <el-input ref="account" type="text" v-model="loginForm.account" auto-complete="off" placeholder="账号" />
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码" />
    </el-form-item>
    <el-form-item>
      <el-col :span="12">
        <el-form-item prop="captcha">
          <el-input type="test" v-model="loginForm.captcha" @keydown.native.enter="login" auto-complete="off" placeholder="验证码, 单击图片刷新" style="width: 100%;" />
        </el-form-item>
      </el-col>
      <el-col class="line" :span="1">&nbsp;</el-col>
      <el-col :span="11">
        <el-form-item>
          <img style="width: 100%;" class="pointer" :src="loginForm.src" @click="refreshCaptcha">
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item style="width:100%;">
      <el-button type="primary" style="width:100%;" @click.native.prevent="login" :loading="logining">登 录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { mapState } from 'vuex'
import ThemePicker from '@/components/ThemePicker'

export default {
  name: 'Login',
  components: {
    ThemePicker
  },
  data () {
    return {
      logining: false,
      loginForm: {
        account: 'admin',
        password: '123',
        captcha: '',
        src: ''
      },
      fieldRules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        captcha: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    login () {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          const loading = this.$loading()
          let userInfo = { account: this.loginForm.account, password: this.loginForm.password, captcha: this.loginForm.captcha }
          this.$api.app.login(userInfo).then((res) => {
            if (res.code === 0) {
              this.$store.commit('login', res.data)
              this.$router.push('/admin').catch(() => { })
            } else if (res.code < 0) {
              this.$message.error(res.message)
              if (res.code === -2) {
                this.refreshCaptcha()
              }
            } else {
              this.$msgbox({ type: 'error', title: '出错了!截图与管理员联系', message: res.message })
            }
            loading.close()
          })
        }
      })
    },
    refreshCaptcha () {
      this.loginForm.src = process.env.BASE_URL + '/api/captcha.jpg?t=' + new Date().getTime()
      this.loginForm.captcha = ''
    },
    // 切换主题
    onThemeChange (themeColor) {
      this.$store.commit('setThemeColor', themeColor)
    }
  },
  mounted () {
    this.refreshCaptcha()
    this.$refs.account.focus()
  },
  computed: {
    ...mapState({
      themeColor: state => state.app.themeColor,
      fullName: state => state.app.config.sys_fullName
    })
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  h3 {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
}
</style>
